<template>
	<view class="addressWrap">
		<text class="left iconfont icon-dingwei"></text>
		<view class="center" v-if="address._id !== undefined">
			<view class="info">
				<text class="name" style="margin-right: 20rpx;">{{address.name}}</text>
				<text class="tel">{{address.mobile}}</text>
			</view>
			<text class="address">{{address.province+address.city+address.detail}}</text>
		</view>
		<view class="nodata" style="font-size: 24rpx;" v-else>请及时设置您的收货地址！</view>
		<text class="right iconfont icon-qianjin" @click="toAddress"></text>
	</view>
</template>

<script>
	export default {
		computed:{
			address(){
				return this.$store.state.shopping.defaultAddress
			}
		},
		mounted(){
			this.getAddress()
		},
		methods:{
			toAddress(){
				uni.navigateTo({
					url:'/subcom-my/Address/Address'
				})
			},
			async getAddress(){
				const {code,data} = await this.$axios.api.getAddress()
				if(code === 200){
					this.addressList = data.reverse()
					const defaultAddress = this.addressList.find(item=>{
						return item.selectDefault === true
					})
					if(typeof defaultAddress !== 'undefined'&& defaultAddress !== null){
						this.$store.commit('setAddress', defaultAddress)
					}else{
						this.$store.commit('setAddress', {})
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.addressWrap{
	min-height:120rpx;
	padding: 20rpx;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: rgb(240, 255, 250);
	border-radius: 20rpx;
	.iconfont{
		font-size: 36rpx;
	}
	.left{
		color: $u-success;
	}
	.center{
		flex: 1;
		height: 100rpx;
		display: flex;
		flex-direction: column;
		font-size: 24rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		.info,.address{
			line-height: 50rpx;
		}
	}
	.nodata{
		flex:1;
		line-height: 60rpx;
		font-size: 28rpx;
		text-align: center;
	}
}
</style>
